<template>
	<div class="title">测试页面：您可以自由改变他们的颜色和大小哦</div>
	<div class="icon-list fc">
		<div class="icon-box" v-for="icon in iconList" :key="icon">
			<svg-icon class="icon" :iconClass="icon" />
			<span class="icon-name">{{ icon }}</span>
		</div>
	</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
	name: 'app',
	setup() {
		const data = reactive({
			iconList: ['dashboard', 'example', 'eye-open', 'eye', 'form', 'link', 'nested', 'password', 'table', 'tree', 'user', '404']
		});
		return {
			...toRefs(data)
		};
	}
};
</script>
<style lang="scss" scoped="scoped">
.title {
	font-size: 30px;
	padding: 50px;
	text-align: center;
}
.icon-list {
	margin: 15px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	padding-left: 60px;
	.icon {
		font-size: 50px;
		margin: 0px 30px;
	}

	.icon-box {
		width: 50%;
		margin: 30px 0px;
	}
	.icon-name {
		font-size: 30px;
	}
}
</style>
